<template>
    <div class=main :id=div_id>
        <canvas :id=canvas_id></canvas>
    </div>
</template>

<script setup>
import {defineExpose,defineProps,getCurrentInstance, onMounted, onUnmounted, ref} from 'vue'
import  { v4 as uuidv4 } from 'uuid'

let canvas_id = uuidv4()
let div_id = uuidv4()

const proxy = getCurrentInstance()
const props = defineProps({
    chooseShow:{
        type:Boolean,
        default:false,
        required: false //是否必传
    },
    freqBand:{
        type:Array,
        default:[{title:"A频段",startFreq:100,stopFreq:200,backgroundColor:"#221F1E",color:"#f5d37f"},{title:"B频段",startFreq:300,stopFreq:500,backgroundColor:"#221F1E",color:"#f5d37f"}]
    }
})


let viewTypeEnum = {
        FFT: 1,
        WAVE: 2,
        FULL: 3,
        FFT_WAVE: 4,
        FFT_FULL: 5,
        properties: {
            1: {name: '频域图', value: 1},
            2: {name: '时域图', value: 2},
            3: {name: '瀑布图', value: 3},
            4: {name: '频域+时域图', value: 4},
            5: {name: '频域+瀑布图', value: 5}
        }
    },
    showType = 1,
    fftRect = {left: 10, right: 1000, top: 10, bottom: 500, width: 1000, height: 200},
    freqRect = {left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0},
    levelRect = {left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0},
    fullRect = {left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0}, // 瀑布图区域
    legendRect = {left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0}, // 图例区域
    waveRect = {left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0}, // 图例区域
    leftPadding = 10,
    rightPadding = 50,
    topPadding = 10,
    bottomPadding = 25,
    minFreq = 0,
    maxFreq = 1000,
    leftFreq = 0,
    rightFreq = 1000,
    minLevel = -500,
    maxLevel = 500,
    minWav = -16384,
    maxWav = 16384,
    bottomLevel = -200,
    topLevel = 200,
    rowNum = 10, // 行
    cloumnNum = 10, // 列
    canvas= ref(), // 画布
    painter= ref(), //
    jionFull = false,
    fullImg = null, // 瀑布图缓存
    fftData = [], // fft数据
    waveData = [],
    chooseShow = false,
    chooseIng = false,
    // chooseBeginX = 0,
    // chooseEndX = 0,
    chooseBeginFreq = 0,
    chooseEndFreq = 0,
    mouseBeginX = 0, // 鼠标按下点
    mouseBeginY = 0, // 鼠标按下点
    mouseHoverX = 0, // 鼠标悬浮坐标点X
    mouseHoverY = 0,
    mouseEndX = 0, // 鼠标弹起点X
    mouseEndY = 0, // 鼠标弹起点X
    selectFreq = false,
    moveFreq = false,
    selectLevel = false,
    moveLevel = false,
    subLineShow = true,//辅助线显示功能开启
    subXLineShow = false,//电平辅助线显示
    subYLineShow = false,//频率辅助线显示
    nowFreq=0,
    nowLevel=0
// colors: {
//   chooseColor:
// }
    // 检测浏览器
    const detectBrowser = () => {
        if (!window.FileReader) {
            console.log('你的浏览器不支持读取文件')
        }
    }
    const setShowType = (type) => {
        showType = type
    }
    const setFftData =(data) => {
        fftData = data
        jionFull = true
        paint()
    }
    const setWaveData =(data) => {
        waveData = data
        paint()
    }
    let setChooseFreq =(leftFreq, rightFreq) => {
        chooseBeginFreq = leftFreq
        chooseEndFreq = rightFreq
        chooseShow = true
        paint()
    }
    const setStartStopFreq =(newMinFreq,newMaxFreq) =>{
        if(newMinFreq !== minFreq || newMaxFreq !== maxFreq){
            minFreq =  newMinFreq
            maxFreq = newMaxFreq
            paint()
        }
    }
    const resetRect =() => {
        canvas.value.width = document.getElementById(div_id).clientWidth
        canvas.value.height = document.getElementById(div_id).clientHeight
        // 全部归0
        // fft区域
        fftRect.left = 0
        fftRect.right = 0
        fftRect.top = 0
        fftRect.bottom = 0
        fftRect.width = 0
        fftRect.height = 0
        // 频率刻度区域
        freqRect.left = 0
        freqRect.right = 0
        freqRect.top = 0
        freqRect.bottom = 0
        freqRect.width = 0
        freqRect.height = 0
        // 电平刻度区域
        levelRect.left = 0
        levelRect.right = 0
        levelRect.top = 0
        levelRect.bottom = 0
        levelRect.width = 0
        levelRect.height = 0
        // 波形图区域
        waveRect.left = 0
        waveRect.right = 0
        waveRect.top = 0
        waveRect.bottom = 0
        waveRect.width = 0
        waveRect.height = 0
        // 瀑布图区域
        fullRect.left = 0
        fullRect.right = 0
        fullRect.top = 0
        fullRect.bottom = 0
        fullRect.width = 0
        fullRect.height = 0
        // 瀑布图图例区域
        legendRect.left = 0
        legendRect.right = 0
        legendRect.top = 0
        legendRect.bottom = 0
        levelRect.width = 0
        legendRect.height = 0

        if (showType === viewTypeEnum.FFT) {
            // fft区域
            fftRect.left = leftPadding
            fftRect.right = canvas.value.width - rightPadding
            fftRect.top = topPadding
            fftRect.bottom = canvas.value.height - bottomPadding
            fftRect.width = canvas.value.width - leftPadding - rightPadding
            fftRect.height = canvas.value.height - topPadding - bottomPadding
            // 频率刻度区域
            freqRect.left = fftRect.left
            freqRect.right = fftRect.right
            freqRect.top = fftRect.bottom
            freqRect.bottom = canvas.value.height
            freqRect.width = fftRect.width
            freqRect.height = bottomPadding
            // 电平刻度区域
            levelRect.left = fftRect.right
            levelRect.right = canvas.value.width
            levelRect.top = fftRect.top
            levelRect.bottom = fftRect.bottom
            levelRect.width = rightPadding
            levelRect.height = fftRect.height
        } else if (showType === viewTypeEnum.WAVE) {
            // 波形图区域
            waveRect.left = leftPadding
            waveRect.right = canvas.value.width - rightPadding
            waveRect.top = topPadding
            waveRect.bottom = canvas.value.height - bottomPadding
            waveRect.width = canvas.value.width - leftPadding - rightPadding
            waveRect.height = canvas.value.height - topPadding - bottomPadding
        } else if (showType === viewTypeEnum.FULL) {
            // 瀑布图区域
            fullRect.left = leftPadding
            fullRect.right = canvas.value.width - rightPadding
            fullRect.top = topPadding
            fullRect.bottom = canvas.value.height - bottomPadding
            fullRect.width = canvas.value.width - leftPadding - rightPadding
            fullRect.height = canvas.value.height - topPadding - bottomPadding
            fullImg = painter.getImageData(fullRect.left, fullRect.top, fullRect.width, fullRect.height - 1)
            // 瀑布图图例区域
            legendRect.left = fullRect.right
            legendRect.right = canvas.value.width
            legendRect.top = fullRect.top
            legendRect.bottom = fullRect.bottom
            legendRect.width = rightPadding
            legendRect.height = fullRect.height
        } else if (showType === viewTypeEnum.FFT_WAVE) {
            // fft区域
            fftRect.left = leftPadding
            fftRect.right = canvas.value.width - rightPadding
            fftRect.top = topPadding
            fftRect.bottom = canvas.value.height / 2 - bottomPadding
            fftRect.width = canvas.value.width - leftPadding - rightPadding
            fftRect.height = canvas.value.height / 2 - topPadding - bottomPadding
            // 频率刻度区域
            freqRect.left = fftRect.left
            freqRect.right = fftRect.right
            freqRect.top = fftRect.bottom
            freqRect.bottom = canvas.value.height / 2
            freqRect.width = fftRect.width
            freqRect.height = bottomPadding
            // 电平刻度区域
            levelRect.left = fftRect.right
            levelRect.right = canvas.value.width
            levelRect.top = fftRect.top
            levelRect.bottom = fftRect.bottom
            levelRect.width = rightPadding
            levelRect.height = fftRect.height
            // 波形图区域
            waveRect.left = leftPadding
            waveRect.right = canvas.value.width - rightPadding
            waveRect.top = canvas.value.height / 2 + topPadding
            waveRect.bottom = canvas.value.height - bottomPadding
            waveRect.width = canvas.value.width - leftPadding - rightPadding
            waveRect.height = canvas.value.height / 2 - topPadding - bottomPadding
        } else if (showType === viewTypeEnum.FFT_FULL) {
            // fft区域
            fftRect.left = leftPadding
            fftRect.right = canvas.value.width - rightPadding
            fftRect.top = topPadding
            fftRect.bottom = canvas.value.height / 2 - bottomPadding
            fftRect.width = canvas.value.width - leftPadding - rightPadding
            fftRect.height = canvas.value.height / 2 - topPadding - bottomPadding
            // 频率刻度区域
            freqRect.left = fftRect.left
            freqRect.right = fftRect.right
            freqRect.top = fftRect.bottom
            freqRect.bottom = canvas.value.height / 2
            freqRect.width = fftRect.width
            freqRect.height = bottomPadding
            // 电平刻度区域
            levelRect.left = fftRect.right
            levelRect.right = canvas.value.width
            levelRect.top = fftRect.top
            levelRect.bottom = fftRect.bottom
            levelRect.width = rightPadding
            levelRect.height = fftRect.height
            // 瀑布图区域
            fullRect.left = leftPadding
            fullRect.right = canvas.value.width - rightPadding
            fullRect.top = canvas.value.height / 2 + topPadding
            fullRect.bottom = canvas.value.height - bottomPadding
            fullRect.width = canvas.value.width - leftPadding - rightPadding
            fullRect.height = canvas.value.height / 2 - topPadding - bottomPadding

            fullImg = painter.getImageData(fullRect.left, fullRect.top, fullRect.width, fullRect.height - 1)
            // 瀑布图图例区域
            legendRect.left = fullRect.right
            legendRect.right = canvas.value.width
            legendRect.top = fullRect.top
            legendRect.bottom = fullRect.bottom
            legendRect.width = rightPadding
            legendRect.height = fullRect.height
        }
        paint()
    }
    const drawFreqBand =() =>{
        painter.save()
        for (let i=0;i<props.freqBand.length;i++){
            let startX = (props.freqBand[i].startFreq - leftFreq) / (rightFreq - leftFreq) * fftRect.width + fftRect.left
            let endX = (props.freqBand[i].stopFreq - leftFreq) / (rightFreq - leftFreq) * fftRect.width + fftRect.left
            // 设置fillStyle为当前的渐变对象
            painter.fillStyle = props.freqBand[i].backgroundColor
            // 绘制渐变图形
            painter.fillRect(startX > endX ? endX : startX, fftRect.top, Math.abs(endX - startX), fftRect.height)
            painter.fillStyle = props.freqBand[i].color

            painter.fillText(props.freqBand[i].title ,
                startX > endX ? endX : startX + ((Math.abs(endX - startX)) - (painter.measureText(props.freqBand[i].title).width))/2,
                fftRect.top + measureText(painter.fontSize, painter.fontFamily, props.freqBand[i].title).height,
                painter.measureText(props.freqBand[i].title).width)
            painter.fillStyle = null
        }
        painter.restore()
    }
    const drawFft = () => {
        painter.save()
        painter.strokeStyle = '#f5d37f'
        painter.lineWidth = 1
        painter.beginPath()
        // canvas.value.clipRect(fftRect.left, fftRect.top, fftRect.width, fftRect.height)
        for (let i = 1; i < fftData.length; i++) {
            painter.moveTo(Math.round((fftData[i - 1][0] - leftFreq) / (rightFreq - leftFreq) * fftRect.width + fftRect.left),
                Math.round((topLevel - fftData[i - 1][1]) / (topLevel - bottomLevel) * fftRect.height + fftRect.top))
            painter.lineTo(Math.round((fftData[i][0] - leftFreq) / (rightFreq - leftFreq) * fftRect.width + fftRect.left),
                Math.round((topLevel - fftData[i][1]) / (topLevel - bottomLevel) * fftRect.height + fftRect.top))
        }
        // canvas.value.clipRect(0, 0, canvas.value.width, canvas.value.height)
        painter.rect(fftRect.left, fftRect.top, fftRect.width, fftRect.height)
        painter.clip()
        painter.closePath()
        painter.stroke()
        painter.restore()
    }
    const drawLegend = () => {
        painter.save()
        let grad = painter.createLinearGradient(0, legendRect.top, 0, legendRect.bottom)
        grad.addColorStop(0, 'rgb(0,0,0)')
        grad.addColorStop(1, 'rgb(255,255,255)')
        painter.fillStyle = grad
        painter.fillRect(legendRect.left + legendRect.width / 4, legendRect.top, legendRect.width / 2, legendRect.height)
        painter.fillStyle = null
        painter.restore()
    }
    const drawFull = () => {
        if (jionFull) {
            let startPx = 0
            let stopPx = 0
            let startIndex = 0
            let stopIndex = fftData.length - 1
            let step = 1

            if (fftData.length === 0) return

            if (leftFreq > fftData[0][0]) {
                startPx = 0
                startIndex = (leftFreq - fftData[0][0]) / (fftData[fftData.length - 1][0] - fftData[0][0]) * fftData.length
            } else {
                startPx = (fftData[0][0] - leftFreq) / (rightFreq - leftFreq) * fullRect.width
                startIndex = 0
            }

            if (rightFreq > fftData[fftData.length - 1][0]) {
                stopPx = (fftData[fftData.length - 1][0] - leftFreq) / (rightFreq - leftFreq) * fullRect.width
                stopIndex = fftData.length - 1
            } else {
                stopPx = fullRect.width
                stopIndex = (rightFreq - fftData[0][0]) / (fftData[fftData.length - 1][0] - fftData[0][0]) * fftData.length
            }
            step = (stopIndex - startIndex) / (stopPx - startPx)
            const imageData = painter.createImageData(fullRect.width, 1)
            for (let i = startPx; i < stopPx; i++) {
                const vi = (i - startPx)
                imageData.data[Math.round(i) * 4] = 255 - (fftData[Math.round(vi * step + startIndex)][1] - bottomLevel) / (topLevel - bottomLevel) * 255
                imageData.data[Math.round(i) * 4 + 1] = 255 - (fftData[Math.round(vi * step + startIndex)][1] - bottomLevel) / (topLevel - bottomLevel) * 255
                imageData.data[Math.round(i) * 4 + 2] = 255 - (fftData[Math.round(vi * step + startIndex)][1] - bottomLevel) / (topLevel - bottomLevel) * 255
                imageData.data[Math.round(i) * 4 + 3] = 255
            }
            painter.putImageData(imageData, fullRect.left, fullRect.top)
            painter.putImageData(fullImg, fullRect.left, fullRect.top + 1)
            fullImg = painter.getImageData(fullRect.left, fullRect.top, fullRect.width, fullRect.height)
            jionFull = false
        } else {
            painter.putImageData(fullImg, fullRect.left, fullRect.top)
        }
    }
    const drawWave = () => {
        painter.save()
        painter.strokeStyle = '#f5d37f'
        painter.lineWidth = 1
        painter.beginPath()
        // canvas.value.clipRect(fftRect.left, fftRect.top, fftRect.width, fftRect.height)
        let step = waveData.length / waveRect.width
        for (let i = 1; i < waveData.length; i++) {
            painter.moveTo((i - 1) * step,
                (maxWav - waveData[i - 1]) / (maxWav - minWav) * waveRect.height + waveRect.top)
            painter.lineTo(i * step,
                (maxWav - waveData[i]) / (maxWav - minWav) * waveRect.height + waveRect.top)
        }
        painter.rect(waveRect.left, waveRect.top, waveRect.width, waveRect.height)
        painter.clip()
        painter.closePath()
        painter.stroke()
        painter.restore()
    }
    const drawWaveGrid = () => {
        painter.save()
        painter.strokeStyle = '#cfd9da'
        painter.lineWidth = 0.5
        painter.beginPath()

        // 画横线
        for (let i = 0; i <= rowNum; i++) {
            painter.moveTo(waveRect.left, waveRect.height / rowNum * i + waveRect.top)
            painter.lineTo(waveRect.right, waveRect.height / rowNum * i + waveRect.top)
        }
        painter.stroke()
        painter.closePath()
        painter.restore()
    }
    const measureText = (fontSize, fontFamily, text) => {
        let spanDom = document.createElement('span')
        spanDom.style.margin = '0'
        spanDom.style.fontSize = fontSize
        spanDom.style.opacity = '0'
        // spanDom.style.fontFamily = fontFamily;
        spanDom.innerHTML = text
        document.body.append(spanDom)
        let sizeD = {}
        sizeD.width = spanDom.offsetWidth
        sizeD.height = spanDom.offsetHeight / 2
        spanDom.remove()
        return sizeD
    }
    const drawFreq = () => {
        painter.strokeStyle = '#f8fafa'
        painter.fillStyle = '#f8fafa'
        for (let i = 0; i <= cloumnNum; i++) {
            let freqStr = (leftFreq + (rightFreq - leftFreq) / cloumnNum * i).toFixed(2) + ' Mhz'
            let halfwidth = painter.measureText(freqStr).width / 2
            let halfHeight = measureText(painter.fontSize, painter.fontFamily, freqStr).height
            if (i === 0) {
                painter.fillText(freqStr, fftRect.left, fftRect.bottom + halfHeight, painter.measureText(freqStr).width)
            } else {
                painter.fillText(freqStr, fftRect.width / cloumnNum * i + leftPadding - halfwidth, fftRect.bottom + halfHeight, painter.measureText(freqStr).width)
                // painter.strokeText(freqStr, fftRect.width / cloumnNum * i + leftPadding, canvas.value.height - bottomPadding, painter.measureText(freqStr).width)
            }
        }
    }
    const drawLevel = () => {
        painter.strokeStyle = '#f8fafa'
        painter.fillStyle = '#f8fafa'
        for (let i = 0; i <= rowNum; i++) {
            let levelStr = (topLevel - (topLevel - bottomLevel) / rowNum * i).toFixed(1) + ' Bd'
            let halfHeight = measureText(painter.fontSize, painter.fontFamily, levelStr).height / 2
            if (i === rowNum) {
                painter.fillText(levelStr, fftRect.right, fftRect.bottom, painter.measureText(levelStr).width)
            } else {
                painter.fillText(levelStr, fftRect.right, fftRect.height / rowNum * i + topPadding + halfHeight, painter.measureText(levelStr).width)
                // painter.strokeText(freqStr, fftRect.width / cloumnNum * i + leftPadding, canvas.value.height - bottomPadding, painter.measureText(freqStr).width)
            }
        }
    }
    const drawChoose = () => {
        painter.save()
        let startX = (chooseBeginFreq - leftFreq) / (rightFreq - leftFreq) * fftRect.width + fftRect.left
        let endX = (chooseEndFreq - leftFreq) / (rightFreq - leftFreq) * fftRect.width + fftRect.left
        // 创建一个渐变色线性对象
        let grad = painter.createLinearGradient(startX > endX ? endX : startX, 0, startX > endX ? startX : endX, 0)
        // 设置渐变颜色
        grad.addColorStop(0, 'rgba(22,184,200,0.47)')
        grad.addColorStop(0.5, 'rgba(82,67,192,0.47)')
        grad.addColorStop(1, 'rgba(22,184,200,0.47)')
        // 设置fillStyle为当前的渐变对象
        painter.fillStyle = grad
        // 绘制渐变图形
        painter.fillRect(startX > endX ? endX : startX, fftRect.top, Math.abs(endX - startX), fftRect.height)
        painter.fillStyle = null
        painter.restore()
    }
    const drawSelectFreq = () => {
        painter.save()
        painter.fillStyle = 'rgba(73,114,248,0.87)'
        painter.fillRect(mouseBeginX, fftRect.top, mouseEndX - mouseBeginX, fftRect.height + freqRect.height)
        painter.fillStyle = null
        painter.restore()
    }
    const drawSelectLevel = () => {
        painter.save()
        painter.fillStyle = 'rgba(73,114,248,0.87)'
        painter.fillRect(leftPadding, mouseBeginY, freqRect.width + levelRect.width, mouseEndY - mouseBeginY)
        painter.fillStyle = null
        painter.restore()
    }
    const drawFftGrid = () => {
        painter.save()
        painter.strokeStyle = '#cfd9da'
        painter.lineWidth = 0.5
        painter.beginPath()

        // 画横线
        for (let i = 0; i <= rowNum; i++) {
            painter.moveTo(fftRect.left, fftRect.height / rowNum * i + fftRect.top)
            painter.lineTo(fftRect.right, fftRect.height / rowNum * i + fftRect.top)
        }

        // 画纵线
        for (let i = 0; i <= cloumnNum; i++) {
            painter.moveTo(fftRect.width / cloumnNum * i + fftRect.left, fftRect.top)
            painter.lineTo(fftRect.width / cloumnNum * i + fftRect.left, fftRect.bottom)
        }
        painter.stroke()
        painter.closePath()
        painter.restore()
    }
    const drawSubLine = () =>{
        painter.save()
        painter.strokeStyle = '#EB3324'
        painter.lineWidth = 1
        painter.beginPath()

        let freqStr = '频率：' + nowFreq.toFixed(2) + ' Hz'
        let levelStr = '电平：' + nowLevel.toFixed(2) + ' dBm'

        if(subXLineShow){
            painter.moveTo(fftRect.left, mouseHoverY)
            painter.lineTo(levelRect.right, mouseHoverY)
            painter.fillText(levelStr, fftRect.left, fftRect.bottom - 8, painter.measureText(levelStr).width)
        }

        if(subYLineShow){
            painter.moveTo(mouseHoverX, fftRect.top)
            painter.lineTo(mouseHoverX, freqRect.bottom)
            painter.fillText(freqStr, fftRect.left, fftRect.bottom - 20, painter.measureText(freqStr).width)
        }
        painter.stroke()
        painter.closePath()
        painter.restore()
    }
    const paint = () => {
        painter.clearRect(0, 0, canvas.value.width, canvas.value.height)
        drawFreqBand()
        if (showType === viewTypeEnum.FFT || showType === viewTypeEnum.FFT_WAVE || showType === viewTypeEnum.FFT_FULL) drawFftGrid()
        if (showType === viewTypeEnum.FFT || showType === viewTypeEnum.FFT_WAVE || showType === viewTypeEnum.FFT_FULL) drawFft()
        if (chooseShow) drawChoose()
        if (showType === viewTypeEnum.FFT || showType === viewTypeEnum.FFT_WAVE || showType === viewTypeEnum.FFT_FULL) drawFreq()
        if (showType === viewTypeEnum.FFT || showType === viewTypeEnum.FFT_WAVE || showType === viewTypeEnum.FFT_FULL) drawLevel()
        if (selectFreq) drawSelectFreq()
        if (selectLevel) drawSelectLevel()
        if (showType === viewTypeEnum.FULL || showType === viewTypeEnum.FFT_FULL) drawLegend()
        if (showType === viewTypeEnum.FULL || showType === viewTypeEnum.FFT_FULL) drawFull()
        if (showType === viewTypeEnum.WAVE || showType === viewTypeEnum.FFT_WAVE) drawWave()
        if (showType === viewTypeEnum.WAVE || showType === viewTypeEnum.FFT_WAVE) drawWaveGrid()
        if (subLineShow) drawSubLine()
    }
    // 封装的scrollTop
    const scroll = () => {
        if (window.pageYOffset != null) { // ie9+ 高版本浏览器
            // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        } else if (document.compatMode === 'CSS1Compat') { // 标准浏览器   来判断有没有声明DTD
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return { // 未声明 DTD
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
    const canvasDown = (e) => {
        mouseBeginX = e.pageX - canvas.value.offsetLeft
        mouseBeginY = e.pageY - canvas.value.offsetTop
        mouseEndX = mouseBeginX
        mouseEndY = mouseBeginY
        if (e.button === 0 && mouseBeginX > fftRect.left && mouseBeginX < fftRect.right && mouseBeginY > fftRect.top && mouseBeginY < fftRect.bottom) {
            chooseIng = true
            chooseShow = true
            chooseBeginFreq = (mouseBeginX - fftRect.left) / fftRect.width * (rightFreq - leftFreq) + leftFreq
        }
        if (mouseBeginX > freqRect.left && mouseBeginX < freqRect.right && mouseBeginY > freqRect.top && mouseBeginY < freqRect.bottom) {
            if (e.button === 2) {
                selectFreq = true
            } else if (e.button === 0) {
                moveFreq = true
            }
        }
        if (mouseBeginX > levelRect.left && mouseBeginX < levelRect.right && mouseBeginY > levelRect.top && mouseBeginY < levelRect.bottom) {
            if (e.button === 2) {
                selectLevel = true
            } else if (e.button === 0) {
                moveLevel = true
            }
        }
    }
    const canvasMove = (e) => {
        mouseHoverX = e.pageX - canvas.value.offsetLeft
        mouseHoverY = e.pageY - canvas.value.offsetTop
        mouseEndX = mouseHoverX
        mouseEndY = mouseHoverY

        if(subLineShow && (showType === viewTypeEnum.FFT || showType=== viewTypeEnum.FULL || showType === viewTypeEnum.FFT_WAVE || showType === viewTypeEnum.FFT_FULL)){
            let wanthFreq = Math.abs(leftFreq-rightFreq);
            nowFreq=leftFreq+((mouseHoverX-leftPadding)/fftRect.width)*wanthFreq;
        }
        if(subLineShow && showType === viewTypeEnum.FFT){ // 全FFT时计算电平
            let wanthLevel = Math.abs(topLevel-bottomLevel);
            nowLevel=topLevel-wanthLevel*(mouseHoverY-topPadding)/fftRect.height;
        }

        if(showType === viewTypeEnum.FFT_WAVE || showType === viewTypeEnum.FFT_FULL){ //一半fft时计算电平
            let wanthLevel = Math.abs(topLevel-bottomLevel);
            nowLevel = topLevel-wanthLevel*(mouseHoverY-topPadding)/(fftRect.height/2);
        }

        if(mouseHoverX > fftRect.left && mouseHoverX < fftRect.right && mouseHoverY >fftRect.top && mouseHoverY < freqRect.bottom){
            subYLineShow = true;
        }else{
            subYLineShow = false;
        }

        if(mouseHoverX > fftRect.left && mouseHoverX < levelRect.right && mouseHoverY >fftRect.top && mouseHoverY < fftRect.bottom){
            subXLineShow = true;
        }else{
            subXLineShow = false;
        }


        if (chooseIng) {
            chooseEndFreq = (mouseEndX - fftRect.left) / fftRect.width * (rightFreq - leftFreq) + leftFreq
        }
        if (moveFreq) {
            let moveVal = (rightFreq - leftFreq) / freqRect.width * (mouseBeginX - mouseEndX)
            if (leftFreq + moveVal >= minFreq && rightFreq + moveVal <= maxFreq) {
                leftFreq += moveVal
                rightFreq += moveVal
            }
            mouseBeginX = mouseEndX
            mouseBeginY = mouseEndY
        }
        if (moveLevel) {
            let moveVal = (topLevel - bottomLevel) / levelRect.height * (mouseEndY - mouseBeginY)
            if (topLevel + moveVal <= maxLevel && bottomLevel + moveVal >= minLevel) {
                topLevel += moveVal
                bottomLevel += moveVal
            }
            mouseBeginX = mouseEndX
            mouseBeginY = mouseEndY
        }
        //if (selectFreq || selectLevel || chooseIng || moveFreq || moveLevel)
        paint()
    }
    const canvasUp = (e) =>  {
        mouseEndX = e.pageX - canvas.value.offsetLeft
        mouseEndY = e.pageY - canvas.value.offsetTop
        if (chooseIng) {
            chooseEndFreq = (mouseEndX - fftRect.left) / fftRect.width * (rightFreq - leftFreq) + leftFreq
            if (chooseEndFreq < chooseBeginFreq) {
                let freq = chooseEndFreq
                chooseEndFreq = chooseBeginFreq
                chooseBeginFreq = freq
            }
            if (chooseEndFreq === chooseBeginFreq) {
                chooseShow = false
            } else {
                // 发送信号
                // proxy.emit('chooseFreqChange', chooseBeginFreq, chooseEndFreq)
            }
            // alert('框选开始频率:' + chooseBeginFreq + '框选结束频率' + chooseEndFreq)
        }
        if (selectFreq) {
            let beginFreq = (mouseBeginX > mouseEndX ? mouseEndX : mouseBeginX - freqRect.left) / freqRect.width * (rightFreq - leftFreq) + leftFreq
            let endFreq = (mouseBeginX > mouseEndX ? mouseBeginX : mouseEndX - freqRect.left) / freqRect.width * (rightFreq - leftFreq) + leftFreq
            leftFreq = beginFreq
            rightFreq = endFreq
        }
        if (selectLevel) {
            let newBottomLevel = topLevel - (mouseBeginY > mouseEndY ? mouseBeginY : mouseEndY - levelRect.top) / levelRect.height * (topLevel - bottomLevel)
            let newTopLevel = topLevel - (mouseBeginY > mouseEndY ? mouseEndY : mouseBeginY - levelRect.top) / levelRect.height * (topLevel - bottomLevel)
            bottomLevel = newBottomLevel
            topLevel = newTopLevel
        }
        chooseIng = false
        selectFreq = false
        moveFreq = false
        selectLevel = false
        moveLevel = false
        paint()
    }
    const canvasDblClick =(e) => {
        // 重置频率区域
        if (e.button === 0 && mouseHoverX > freqRect.left && mouseHoverX < freqRect.right && mouseHoverY > freqRect.top && mouseHoverY < freqRect.bottom) {
            leftFreq = minFreq
            rightFreq = maxFreq
            paint()
        }
        // 重置电平区域
        if (e.button === 0 && mouseHoverX > levelRect.left && mouseHoverX < levelRect.right && mouseHoverY > levelRect.top && mouseHoverY < levelRect.bottom) {
            bottomLevel = minLevel
            topLevel = maxLevel
            paint()
        }
    }
    const canvasWheel = (e) =>  {
        if (e.wheelDelta > 0 || e.detail < 0) {
            if (mouseHoverX > freqRect.left && mouseHoverX < freqRect.right && mouseHoverY > freqRect.top && mouseHoverY < freqRect.bottom) {
                let changeVal = (rightFreq - leftFreq) / 10
                let changeLeftVal = (mouseHoverX - freqRect.left) / freqRect.width * changeVal
                let changeRightVal = changeVal - changeLeftVal
                leftFreq += changeLeftVal
                rightFreq -= changeRightVal
            }
            if (mouseHoverX > levelRect.left && mouseHoverX < levelRect.right && mouseHoverY > levelRect.top && mouseHoverY < levelRect.bottom) {
                let changeVal = (topLevel - bottomLevel) / 10
                let changeTopVal = (mouseHoverY - levelRect.top) / levelRect.height * changeVal
                let changeBottomVal = changeVal - changeTopVal
                topLevel -= changeTopVal
                bottomLevel += changeBottomVal
            }
        } else {
            if (mouseHoverX > freqRect.left && mouseHoverX < freqRect.right && mouseHoverY > freqRect.top && mouseHoverY < freqRect.bottom) {
                let changeVal = (rightFreq - leftFreq) / 9
                let changeLeftVal = (mouseHoverX - freqRect.left) / freqRect.width * changeVal
                let changeRightVal = changeVal - changeLeftVal
                if (leftFreq - changeLeftVal < minFreq) {
                    leftFreq = minFreq
                } else {
                    leftFreq -= changeLeftVal
                }
                if (rightFreq + changeRightVal > maxFreq) {
                    rightFreq = maxFreq
                } else {
                    rightFreq += changeRightVal
                }
            }
            if (mouseHoverX > levelRect.left && mouseHoverX < levelRect.right && mouseHoverY > levelRect.top && mouseHoverY < levelRect.bottom) {
                let changeVal = (topLevel - bottomLevel) / 10
                let changeTopVal = (mouseHoverY - levelRect.top) / levelRect.height * changeVal
                let changeBottomVal = changeVal - changeTopVal
                if (topLevel + changeTopVal > maxLevel) {
                    topLevel = maxLevel
                } else {
                    topLevel += changeTopVal
                }
                if (bottomLevel - changeBottomVal < minLevel) {
                    bottomLevel = minLevel
                } else {
                    bottomLevel -= changeBottomVal
                }
            }
        }
        paint()
    }
    const canvasOver =  (e) => {
        // console.log('移入')
    }
    const canvasOut = (e) => {
        if (chooseIng) {
            mouseEndX = e.clientX - canvas.value.offsetLeft
            mouseEndY = e.clientY - canvas.value.offsetTop
            chooseIng = false
        }
        selectFreq = false
        moveFreq = false
        selectLevel = false
        moveLevel = false
        subXLineShow = false
        subYLineShow = false
    }
    onMounted(() => {
    canvas.value = document.getElementById(canvas_id)
    canvas.value.width = 500
    canvas.value.height = 400
    painter = canvas.value.getContext('2d')
    painter.fillStyle = 'rgb(133,155,238)'

    window.addEventListener('resize', resetRect)
    canvas.value.addEventListener('contextmenu', function (e) {
        e.preventDefault()
    })
    canvas.value.addEventListener('mousedown', canvasDown)
    canvas.value.addEventListener('mousemove', canvasMove)
    canvas.value.addEventListener('mouseup', canvasUp)
    canvas.value.addEventListener('dblclick', canvasDblClick)
    canvas.value.addEventListener('mousewheel', canvasWheel)
    canvas.value.addEventListener('mouseover', canvasOver)
    canvas.value.addEventListener('mouseout', canvasOut)

    detectBrowser()
    resetRect()
    paint()
})
    onUnmounted(() => {
    // let that = this
})

    defineExpose({
    setStartStopFreq,
    setShowType,
    setChooseFreq,
    setWaveData,
    setFftData
    })
</script>

<style scoped>
.main{
    width: 100%;
    height: 100%;
    background: #2c3e50;
}
</style>
